<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <style>
            .eventpuou{
                background-color: #c5d731;
            }
            .eventpuin{
                background-color: #009ea5;
            }
            .eventprou{
                background-color: #0065a5;
            }
            .eventprin{
                background-color: #008ace;
            }
            .title{
                font-size: xx-large;
                color: red;
            }
        </style>
        <title>HomePage</title>
    </h:head>
    <h:body>
        <p:growl id="messages" showDetail="true" />
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="130" style="border: 0px">
                <h:panelGrid columns="3" style="width: 100%">
                    <h:graphicImage value="/images/Simbolo_Meteocal.png" height="100"></h:graphicImage>
                    <h:outputLabel value="Welcome back #{userBean.name}" styleClass="title"/>
                    <p:button outcome="eventCreation?faces-redirect=true" value="Create a new Event" />
                </h:panelGrid>
            </p:layoutUnit> 
            <p:layoutUnit position="center">
                <h:form>

                    <p:schedule id="schedule" value="#{homePageBean.eventModel}" widgetVar="myschedule" timeZone="GMT+1" draggable="false" resizable="false">
                        <p:ajax event="eventSelect" listener="#{homePageBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                    </p:schedule>


                    <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                        <h:panelGrid id="eventDetails" columns="2">
                            Do you like to see the data of the event? 
                            <p:commandButton id="seeButton" value="Click here!" action="#{homePageBean.gotoDetail()}" >
                                <f:param name="idevent" value="#{homePageBean.idselected}"/>
                            </p:commandButton>
                        </h:panelGrid>
                    </p:dialog>   
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="south" size="60">
                <h:panelGrid columns="4" style="width: 100%">
                    <p:button outcome="settings" value="Modify your data"/>

                    <p:button outcome="search" value="Search for a user" />

                    <p:button outcome="messagedatalist" value="Move to your notifications page" style="background-color: #{homePageBean.colorButton()}"/>

                    <h:form>
                        <p:commandButton action="#{loginBean.logout()}" value="Logout" />
                    </h:form>

                </h:panelGrid>
            </p:layoutUnit>
        </p:layout>

        <script type="text/javascript">
            PrimeFaces.locales['tr'] = {
                closeText: 'kapat',
                prevText: 'geri',
                nextText: 'ileri',
                currentText: 'bugün',
                monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
                    'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
                monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz',
                    'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
                dayNames: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
                dayNamesShort: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
                dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
                weekHeader: 'Hf',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                month: 'Ay',
                week: 'Hafta',
                day: 'Gün',
                allDayText: 'Tüm Gün'
            };
        </script>
        <style type="text/css">
            .value {
                width: 1000px;
            }
        </style>
    </h:body>
</html>